<include file="./Template/Admin/header.html" title="广告版块列表" />
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>广告版块列表</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row m-b-sm m-t-sm">
                            <div class="btn btn-outline btn-primary">
                                <a href="javascript:add();" style="color:#1ab394">添加菜单</a>
                            </div>
                        </div>
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>版块类型</th>
                                    <th>版块名称</th>
                                    <th>版块尺寸</th>
                                    <th>广告数</th>
                                    <th>版块描述</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="pageView">
                            <volist name="list" id="value">
                                <tr>
                                    <td>{$value.id}</td>
                                    <td>{$value.type}</td>
                                    <td>{$value.name}</td>
                                    <td>{$value.width}&nbsp; * &nbsp;{$value.width}</td>
                                    <td></td>
                                    <td>{$value.description}</td>
                                    <td>
                                        <div class="col-md-12">
                                            <a class="btn btn-sm btn-outline btn-primary" href="{:U('Poster/index?spaceid='.$value['id'])}"><i class="fa fa-edit"></i>广告列表 </a>
                                            <a class="btn btn-sm btn-outline btn-primary" href="{:U('Poster/add?spaceid='.$value['id'])}"><i class="fa fa-edit"></i>添加广告</a>
                                            <a class="btn btn-sm btn-outline btn-warning" href="javascript:edit({$value.id});"><i class="fa fa-edit"></i> 修改</a>
                                            <a class="btn btn-sm btn-outline btn-danger" href="javascript:del({$value.id})"><i class="fa fa-trash-o"></i> 删除</a></div>
                                    </td>
                                </tr>
                            </volist>
                            </tbody>
                        </table>
                        <div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框（Modal） -->
    <div class="modal fade in" id="add">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="ibox float-e-margins">
                            <div class="ibox-title">
                                <h5>添加广告版位</h5>
                            </div>
                            <div class="ibox-content">
                                <form role="form" class="form-horizontal m-t" id="addForm" name="addForm" method="post" action="{:U("PosterSpace/save")}">
                                    <div class="form-group draggable">
                                        <label class="col-sm-3 control-label">版位名称：</label>
                                        <div class="col-sm-9">
                                            <input type="text" id="name" name="name" class="form-control" placeholder="请输入文本">
                                        </div>
                                    </div>
                                    <div class="form-group draggable">
                                        <label class="col-sm-3 control-label">版位类型：</label>
                                        <div class="col-sm-9">
                                            <select class="form-control" name="type" id="type">
                                                <option value="1">选项 1</option>
                                                <option value="2">选项 2</option>
                                                <option value="3">选项 3</option>
                                                <option value="4">选项 4</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group draggable">
                                        <label class="col-sm-3 control-label">版位尺寸：</label>
                                        <div class="col-sm-9">
                                            <table>
                                                <tr>
                                                    <td>
                                                        <label class="col-sm-2 control-label">宽:(px)</label>
                                                    </td>
                                                    <td>
                                                        <input name="width" type="text" id="width" class="form-control">
                                                    </td>
                                                    <td>
                                                        <label class="col-sm-2 control-label">高:(px)</label>
                                                    </td>
                                                    <td>
                                                        <input name="height" type="text" id="height" class="form-control">
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="form-group draggable">
                                        <label class="col-sm-3 control-label">版位描述：</label>

                                        <div class="col-sm-9">
                                            <textarea name="description" id="description" class="form-control"></textarea>
                                        </div>
                                    </div>
                                    <div class="hr-line-dashed"></div>
                                    <div class="form-group draggable">
                                        <div class="col-sm-12 col-sm-offset-3">
                                            <button class="btn btn-primary" type="submit" id="submit" name="submit">保存内容</button>
                                        </div>
                                    </div>
                                </form>
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <script src="__ADMIN__js/jquery.min.js"></script>
    <script src="__ADMIN__js/bootstrap.min.js"></script>
    <script src="__ADMIN__js/plugins/layer.3/layer.js"></script>
    <script src="__ADMIN__js/plugins/laypage/laypage.js"></script>
    <script src="__ADMIN__js/common.js"></script>
    <script src="__ADMIN__js/plugins/switchery/switchery.js"></script>

    <script>
        $(function(){
            /**
             * 删除版位
             * @param id
             */
            del = function(id){
                common.ajaxDel("{:U('Admin/PosterSpace/del')}",id,"{:U('Admin/PosterSpace/index')}");
            };
        });
        var id = 0;
        $('button#submit').click(function(){
            var  name = $('#name').val();
            if(!name){
                common.error('版本名称不能为空');
                 return false;
            }
            var  width = $('#width').val();
            if(!width){
                common.error('版本尺寸宽不能为空');
                return false;
            }
            var  height = $('#height').val();
            if(!height){
                common.error('版本尺寸高不能为空');
                return false;
            }
            var objectArr = $('#addForm').serializeArray();
//            console.log(objectArr);
                var data = new Object();
                $.each(objectArr,function(k,v){
                    data[v.name] = v.value;
                });
            data['id'] = id;
            console.log(data);
            $.ajax({
                url:$('#addForm').attr('action'),
                type:"post",
                data:data,
                success:function(data){
                    if(data.status > 0){
                        common.error(data.msg);
                    }else{
                        common.success(data.msg,"{:U('Admin/PosterSpace/index')}");
                    }
                },
                dataType:'JSON'
            });
            return false;
        });
        /**
         * 定义弹出框并初始化
         * @param
         */
        function add(){
            $('#name').val('');
            $('#type').val('');
            $('#width').val('');
            $('#height').val('');
            $('#description').val('');
            id = 0;
            $('#add').modal({ });
        }
        function edit(id){
           $.post("{:U('posterspace/edit')}",{id: id},function(data){
                if(data.status > 0){
                    common.error(data.msg);
                }
//               console.log(data.data);
                id = data.data.id;
               $('#name').val(data.data.name);
               document.getElementById("type").value = data.data.type;
               $('#width').val(data.data.width);
               $('#height').val(data.data.height);
               $('#description').val(data.data.description);
               $('#add').modal({ });
           });
        }
    </script>
</body>
</html>
